<template>
  <scroll-view scroll-x class="menuList" :style="{top:statusBarHeight + 'px' }">
  	<view :class="['menuList-item ss-flex-col ss-col-center', {active:state.activeClass == i}]"
  		v-for="(item,i) in data.list" :key="i+item.src"  @tap="sheep.$router.go(item.url)">
  		<view class="itemBox ss-flex-col ss-col-center ss-row-between">
  			<image class="menuList-img" :src="sheep.$url.cdn(item.src,'ygb')" />
  			<view class="menuList-title">
  				<text class="menuList-title-text">{{item.title.text}}</text>
  				<view class="menuList-title-line" />
  			</view>
  		</view>
  	</view>
  </scroll-view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import sheep from '@/sheep';
  // 数据
  const state = reactive({
    activeClass: 0,
  });
const statusBarHeight = sheep.$platform.device.statusBarHeight
  const props = defineProps({
    data: {
      type: Object,
      default() {},
    },
    styles: {
      type: Object,
      default() {},
    }
  });
function onClick(e,i){
	
}

</script>

<style lang="scss" scoped>
	.active{
		.menuList-title{
			.menuList-title-text{
				
				font-family: YouSheBiaoTiHei !important;
				color:#323232 !important;
				font-size: 30rpx !important;
			}
		}
	}
	.active1{
		.menuList-title{
			position: relative;
			.menuList-title-text{
				font-weight: 600 !important;
				color: #1D1D1D !important;
			}
			.menuList-title-line{
				width: 48rpx;
				height: 6rpx;
				background: #296DDD;
				position: absolute;
				bottom: 12rpx;
				left: 50%;
				z-index: -1;
				transform: translateX(-50%);
			}
		}
	}
	.menuList {
		white-space: nowrap;
		// position: sticky;
		width: 100%;
		z-index: 95;
		transition: 0.1s;
		height: 130rpx;
		padding-bottom: 10rpx;
		.menuList-item {
			display: inline-block;
			width: 124rpx;
			height: 130rpx;
			padding-top: 12rpx;
			box-sizing: border-box;
			.itemBox{
			}
			.menuList-img {
				width: 78rpx;
				height: 78rpx;
			}

			.menuList-title {
				height: 40rpx;
				margin-top: 5rpx;
				.menuList-title-text{
					font-size: 24rpx;
					font-weight: normal;
					line-height: 40rpx;
					color: #666;
				}
			}

		}
	}
</style>
